<template>
    <el-dialog
        v-model="state.dialogFormVisible"
        width="40%"
        :z-index="9"
    >
        <template #header>
			<div class="custom-header">新增</div>
		</template>
        <el-form :model="state.form" ref="ruleFormRef" :rules="rules">
            <el-form-item prop="name" label="问卷名称" label-width="100px">
                <div style="display: flex;">
                    <div>
                        <el-input v-model="state.form.name" autocomplete="off" />
                    </div>
                    <div style="margin-left: 20px;">
                        <el-button @click="state.secondDialog = true">添加问题</el-button>
                    </div>
                </div>
                
            </el-form-item>

            <span v-for="item in state.questList" :key="item">
                <el-form-item prop="type" label="问题类型" label-width="100px">
                    {{ item.label }}
                </el-form-item>
                <el-form-item prop="type" label="问题" label-width="100px">
                    <el-input v-model="item.content" autocomplete="off" />
                </el-form-item>
            </span>
            
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="state.dialogFormVisible = false">关闭</el-button>
                <el-button type="primary" @click="state.dialogFormVisible = false">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>


    <!-- 添加问题 -->
    <el-dialog
        v-model="state.secondDialog"
        width="30%"
        :before-close="handleCloseSecond"
    >
        <template #header>
			<div class="custom-header">添加问题</div>
		</template>
        <div class="dialog-second-c">
            <div>问题类型：</div>
            <div>
                <el-select
                    v-model="state.secondForm.type"
                    class="m-2"
                    placeholder="Select"
                    size="large"
                    style="width: 240px"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="onSubmitSeond">确定</el-button>
            <el-button type="primary" @click="state.secondDialog = false">
                关闭
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
interface RuleForm {
  name: string
  region: string
}
const state = reactive({
    form: {
        name:"",
        region: "",
    },
    secondForm: {
        type: "",
        label: ""
    },
    dialogFormVisible: false,
    secondDialog: false,
    questList: []
})
const options = [
    {
        value: 1,
        label: '是非题',
    },
    {
        value: 2,
        label: '问答题',
    },
]
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
        required: true,
        message: 'Please select Activity zone',
        trigger: 'change',
        },
    ],
})
const emit = defineEmits(['', '']);
const init = () => {
    state.dialogFormVisible = true
}

const handleCloseSecond = () => {
    state.secondDialog = false
}
const onSubmitSeond = () => {
    options.forEach((i: any) => {
        if (i.value == state.secondForm.type) {
            state.secondForm.label = i.label
        }
    })
   
    state.questList.push({type: state.secondForm.type, label: state.secondForm.label, content: ""})
    state.secondDialog = false
}
defineExpose({
	init
})
</script>

<style scoped>
.dialog-footer {
    padding-bottom: 20px;
}
.dialog-second-c {
    display: flex;
}
</style>